<template>
  <div>
    <h1>学生信息列表</h1>
    <ul>
      <li v-for="student in students" :key="student.id">
        {{ student.name }} - {{ student.age }}岁
        <button @click="editStudent(student)">编辑</button>
        <button @click="deleteStudent(student.id)">删除</button>
      </li>
    </ul>
    <button @click="logout">注销</button>

    <!-- 添加学生表单 -->
    <div>
      <h2>添加学生</h2>
      <form @submit.prevent="addStudent">
        <div>
          <label for="name">姓名:</label>
          <input type="text" id="name" v-model="newStudent.name" required />
        </div>
        <div>
          <label for="age">年龄:</label>
          <input type="number" id="age" v-model="newStudent.age" required />
        </div>
        <button type="submit">添加</button>
      </form>
    </div>

    <!-- 编辑学生模态框 -->
    <div v-if="editingStudent" class="modal">
      <div class="modal-content">
        <span class="close" @click="cancelEdit">&times;</span>
        <h2>编辑学生信息</h2>
        <form @submit.prevent="updateStudent">
          <div>
            <label for="edit-name">姓名:</label>
            <input type="text" id="edit-name" v-model="editingStudent.name" required />
          </div>
          <div>
            <label for="edit-age">年龄:</label>
            <input type="number" id="edit-age" v-model="editingStudent.age" required />
          </div>
          <button type="submit">保存</button>
          <button type="button" @click="cancelEdit">取消</button>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStudentStore } from '../store'

const studentStore = useStudentStore()

const students = studentStore.getStudents

const logout = () => {
  studentStore.logout()
}

const newStudent = ref({ name: '', age: '' })
const editingStudent = ref(null)

const addStudent = async () => {
  try {
    await studentStore.addStudent(newStudent.value)
    newStudent.value = { name: '', age: '' } // 清空表单
  } catch (error) {
    console.error('添加学生失败:', error)
  }
}

const editStudent = (student) => {
  editingStudent.value = { ...student }
}

const updateStudent = async () => {
  try {
    await studentStore.updateStudent(editingStudent.value)
    editingStudent.value = null // 关闭模态框
  } catch (error) {
    console.error('更新学生失败:', error)
  }
}

const cancelEdit = () => {
  editingStudent.value = null // 关闭模态框
}

const deleteStudent = async (id) => {
  try {
    await studentStore.deleteStudent(id)
  } catch (error) {
    console.error('删除学生失败:', error)
  }
}
</script>

<style>
.error {
  color: red;
}

.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>
